<template>
    <div>
      <div v-if="showid == 1">
        <!--添加联系人地址-->
        <div class="useraddBOX common_bg_fff" @click="chooseAdress" v-if="noAdress">
          <i class="inlineBlockIcon useraddlogo"></i>
          <p class="font_999_28">请添加联系人、地址、联系方式</p>
        </div>
        <!--联系人信息-->
        <div class="userInfoBOX common_bg_fff" @click="chooseAdress"  v-if="!noAdress">
          <div class="userInfo">
            <div>
              <i class="inlineBlockIcon userlogo"></i>
              <span class="font_333_30">收货人：{{userName}}</span>
            </div>
            <span class="font_333_30">{{userPhone}}</span>
          </div>
          <div class="userAdress">
            <i class="inlineBlockIcon addlogo"></i>
            <span class="font_333_30">收货地址：{{userAdress}}{{userAdress_detail}}</span>
          </div>
        </div>
        <!--如果是企业下单-->
        <div v-show="isCompany" class="isCompanyBOX common_bg_fff">
          <div>
            <i class="iconfont icon-qiye1"></i>
            <span class="font_333_32">企业名称</span>
          </div>
          <input type="text" class="companyName" v-model="companyName" placeholder="请输入企业名称">
        </div>
        <!--choose-->
        <ul class="chooseLIST common_bg_fff">
          <li class="choose_type">
            <div class="choose_type_title">
              <i class="inlineBlockIcon typelogo"></i>
              <span class="font_333_32">类型</span>
            </div>
            <!--<div class="pickerBOX">-->
              <!--<popup-picker :data="paperLIST" v-model="paper_value" @on-change="TYPEonChange"  class="font_666_30 picker" ></popup-picker>-->
              <!--<i class="iconfont icon-jiantouyou"></i>-->
            <!--</div>-->
            <ul class="typeLIST">
              <li v-for="(item,index) in typeLIST" @click="chooseType(item.class_name)">
                <i class="typeChooseLogo iconfont icon-weixuanzhong" v-show="TypechooseList.indexOf(item.class_name)<0"></i>
                <i class="typeChoosedLogo iconfont icon-dagou1" v-show="TypechooseList.indexOf(item.class_name)>=0"></i>
                <span class="font_666_30">{{item.class_name}}</span>
              </li>
            </ul>
          </li>
          <li class="choose_li">
            <div>
              <i class="inlineBlockIcon timelogo"></i>
              <span class="font_333_32">时间段</span>
            </div>
            <div class="pickerBOX">
              <popup-picker :data="timeLIST" v-model="time_value" @on-change="TIMEonChange"  class="font_666_30 picker" :columns="columns"></popup-picker>
              <i class="iconfont icon-jiantouyou"></i>
            </div>
          </li>
        </ul>
        <!--tip-->
        <div class="tip common_bg_fff">
          <div class="tipBOX">
            <i class="inlineBlockIcon tiplogo"></i>
            <span class="font_333_32">备注</span>
          </div>
          <div>
            <textarea class="font_666_30" placeholder="请输入备注(选填)" v-model="remark"></textarea>
            <ul class="imgLIST">
              <li v-for="(item,index) in img">
                <img :src="item" alt="">
                <i class="inlineBlockIcon delIMGBTN" @click="delIMG(index)"></i>
              </li>
              <li class="addIMGBOX" v-if="img.length<3">
                <img src="./img/jiatu.png" alt="">
                <input type="file" accept="image/*" @change="upload($event)" multiple="multiple">
              </li>
            </ul>
          </div>
        </div>
        <!--回收要求-->
        <div class="common_bg_fff Requirement_box">
          <div class="Requirement_title">
            <i class="iconfont icon-huixingzhen"></i>
            <span class="font_333_32">回收要求</span>
          </div>
          <ul class="Requirement_list">
            <li class="font_666_30" v-for="(item, index) in huishouyaoqiuList">{{index+1}}.{{item}}</li>
          </ul>
        </div>
        <!--btn-->
        <div class="xiadan_btn font_fff_36" @click="btn">下单</div>
      </div>
      <div v-if="showid == 2">
        <ul class="listBOX">
          <li class="list common_bg_fff" v-for="(item, index) in list" @click="chooseA(item.id)">
            <div class="userInfo">
              <span class="font_222_30">{{item.con_name}}</span>
              <span class="font_222_30">{{item.con_tel}}</span>
            </div>
            <p class="font_222_28 userAdress">{{item.address_dis}}{{item.address_detail}}</p>
            <div class="userInfo">
              <div @click.stop="setMOREN(item.id)">
                <i class="iconfont icon-gouhao font_FC5E5F_28" v-if="item.is_default=='1'"></i>
                <i class="iconfont icon-weixuanzhong font_888_28" v-if="item.is_default=='0'"></i>
                <span class="font_888_28" :class="{'font_FC5E5F_28':item.is_default=='1'}">[默认地址]</span>
              </div>
              <ul class="userInfo operation">
                <li @click.stop="edit(item.id)"><i class="iconfont icon-iconfontedit "></i><span class="font_888_28">编辑</span></li>
                <li @click.stop="del(item.id,index)"><i class="iconfont icon-shanchu "></i><span class="font_888_28">删除</span></li>
              </ul>
            </div>
          </li>
        </ul>
        <div class="btn font_fff_36" @click="addAdress">增加新地址</div>

        <div class="comon_bg_black" v-if="isdel">
          <div class="choice_box common_bg_fff">
            <p class="font_333_34">确定删除地址？</p>
            <ul class="choice_btn">
              <li @click="cancelDEL">取消</li>
              <li @click="delAdress">确认</li>
            </ul>
          </div>
        </div>
      </div>

      <toast v-model="showPositionValue" type="text" :time="1500" is-show-mask :text="toastText" position="middle"></toast>
    </div>
</template>

<script>
  import { PopupPicker, Toast} from 'vux'
  import fileRead from '@/assets/fileRead.js'
  import qs from 'qs'
    export default {
        name: '',
        components: {
          PopupPicker,
          Toast
        },
        data() {
            return {
              title:'一键回收',
              showid:1,
//              paperLIST:[['请选择','纸类', '塑料类']],
              typeLIST:[],
              TypechooseList:[],
//              paper_value:['请选择类型'],
              timeLIST:[],
              time_value:['请选择时间段'],
              columns:3,
//              type:null,
              time:null,
              companyName:'',
              img:[],
              imgURL:[],
              noAdress:true,
              userName:'',
              userPhone:'',
              userAdress:'',
              userAdress_detail:'',
              remark:'',
              adress_id:null,
              orderTYPE:null,
              isCompany:false,
              huishouyaoqiuList:[
                '分类清晰，不互相混淆',
                '有害垃圾不在回收范围之内',
                '目前只服务企事业单位，个人业务暂不开展',
                '服务时间：7:00-19:00'
              ],
              /**/
              list:[],
              choose:true,
              isdel:false,
              delID:null,
              /*toastText*/
              toastText:'',
              showPositionValue:false,
            }
        },
        created () {
          this.setTitle(this.title)
          if(this.$store.state.xiadanTYPE){
            this.paper_value[0] = this.$store.state.xiadanTYPE
            this.type = this.$store.state.xiadanTYPE
          }
          if(this.$store.state.orderTYPE==0||this.$store.state.orderTYPE==1){
            this.orderTYPE = this.$store.state.orderTYPE
          }
          if(this.$store.state.orderTYPE==0){
            this.isCompany = true
          }
          this.axios.post('/home/Order/allClass',{token:this.$store.state.token}).then((res)=>{
            if(res.data.code==200){
              this.typeLIST = res.data.data
            }
          })
        },
        mounted: function () {
          let date = new Date()
          let year = date.getFullYear()
          let month = date.getMonth()+1
          let maxDay = this.getCountDays(year,month)
          let day = date.getDate()+1
          let days = date.getDate()
          let hours = date.getHours()

          let arr = []
          if(maxDay-days>=15){
            let monobj = {
              name:month+'月',
              value:month+'月',
              parent:'0'
            }
            arr.push(monobj)
            if(hours>12){
              for(let i=day; i<day+15;i++){
                let dayobj = {
                  name:i+'日',
                  value:i+'日',
                  parent:month+'月'
                }
                let timeobj1 = {
                  name:'上午(07:00-12:00)',
                  value:'上午(07:00-12:00)',
                  parent:i+'日'
                }
                let timeobj2 = {
                  name:'下午(13:00-19:00)',
                  value:'下午(13:00-19:00)',
                  parent:i+'日'
                }
                arr.push(dayobj)
                arr.push(timeobj1)
                arr.push(timeobj2)
              }
            }else{
              for(let i=days; i<days+15;i++){
                let dayobj = {
                  name:i+'日',
                  value:i+'日',
                  parent:month+'月'
                }
                let timeobj1 = {
                  name:'上午(07:00-12:00)',
                  value:'上午(07:00-12:00)',
                  parent:i+'日'
                }
                let timeobj2 = {
                  name:'下午(13:00-19:00)',
                  value:'下午(13:00-19:00)',
                  parent:i+'日'
                }
                arr.push(dayobj)
                arr.push(timeobj1)
                arr.push(timeobj2)
              }
            }

          }else{
            if(maxDay == days && hours>12){
//              if(hours>12){
                let monobj = {
                  name:month+1+'月',
                  value:month+1+'月',
                  parent:'0'
                }
                arr.push(monobj)
                for(let i=1; i<=15;i++){
                  let dayobj = {
                    name:i+'日',
                    value:i+'日',
                    parent:month+1+'月'
                  }
                  let timeobj1 = {
                    name:'上午(07:00-12:00)',
                    value:'上午(07:00-12:00)',
                    parent:i+'日'
                  }
                  let timeobj2 = {
                    name:'下午(13:00-19:00)',
                    value:'下午(13:00-19:00)',
                    parent:i+'日'
                  }
                  arr.push(dayobj)
                  arr.push(timeobj1)
                  arr.push(timeobj2)
                }
//              }
            }else{
              let monobj1 = {
                name:month+'月',
                value:month+'月',
                parent:'0'
              }
              let monobj2 = {
                name:month+1+'月',
                value:month+1+'月',
                parent:'0'
              }
              arr.push(monobj1)
              arr.push(monobj2)

              if(hours>12){
                for(let i=day; i<=maxDay;i++){
                  let dayobj = {
                    name:i+'日',
                    value:i+'日',
                    parent:month+'月'
                  }
                  let timeobj1 = {
                    name:'上午(07:00-12:00)',
                    value:'上午(07:00-12:00)',
                    parent:i+'日'
                  }
                  let timeobj2 = {
                    name:'下午(13:00-19:00)',
                    value:'下午(13:00-19:00)',
                    parent:i+'日'
                  }
                  arr.push(dayobj)
                  arr.push(timeobj1)
                  arr.push(timeobj2)
                }
                for(let r=1; r<=15-(maxDay-day)-1;r++){
                  let dayobj = {
                    name:r+'日',
                    value:r+'日',
                    parent:month+1+'月'
                  }
                  let timeobj11 = {
                    name:'上午(07:00-12:00)',
                    value:'上午(07:00-12:00)',
                    parent:r+'日'
                  }
                  let timeobj21 = {
                    name:'下午(13:00-19:00)',
                    value:'下午(13:00-19:00)',
                    parent:r+'日'
                  }
                  arr.push(dayobj)
                  arr.push(timeobj11)
                  arr.push(timeobj21)
                }
              }else{
                for(let i=days; i<=maxDay;i++){
                  let dayobj = {
                    name:i+'日',
                    value:i+'日',
                    parent:month+'月'
                  }
                  let timeobj1 = {
                    name:'上午(07:00-12:00)',
                    value:'上午(07:00-12:00)',
                    parent:i+'日'
                  }
                  let timeobj2 = {
                    name:'下午(13:00-19:00)',
                    value:'下午(13:00-19:00)',
                    parent:i+'日'
                  }
                  arr.push(dayobj)
                  arr.push(timeobj1)
                  arr.push(timeobj2)
                }
                for(let r=1; r<=15-(maxDay-days)-1;r++){
                  let dayobj = {
                    name:r+'日',
                    value:r+'日',
                    parent:month+1+'月'
                  }
                  let timeobj11 = {
                    name:'上午(07:00-12:00)',
                    value:'上午(07:00-12:00)',
                    parent:r+'日'
                  }
                  let timeobj21 = {
                    name:'下午(13:00-19:00)',
                    value:'下午(13:00-19:00)',
                    parent:r+'日'
                  }
                  arr.push(dayobj)
                  arr.push(timeobj11)
                  arr.push(timeobj21)
                }
              }
            }

          }
          this.timeLIST = arr

          this.axios.post('/home/Address/addressList',{token:this.$store.state.token}).then((res)=>{
            if(res.data.code==200){
              let list = res.data.data
              this.list = list
              if(list.length>0){
                this.noAdress = false
              }
//              let show = false
              for(let key in list){
                if(list[key].is_default=='1'){
                  this.userName = list[key].con_name
                  this.userPhone = list[key].con_tel
                  this.userAdress = list[key].address_dis
                  this.userAdress_detail = list[key].address_detail
                  this.adress_id = list[key].id
                  this.noAdress = false
                }
              }
            }
          })
          if(this.$route.params.showID){
            this.showid = this.$route.params.showID
          }
        },
        methods: {
          /*选择下单类型*/
          chooseType(value){
            if(this.TypechooseList.indexOf(value)>=0){
              let index = this.TypechooseList.indexOf(value)
              this.TypechooseList.splice(index,1)
              return
            }
            this.TypechooseList.push(value)
          },
          TIMEonChange(val){
            this.time = val
          },
          getCountDays(year,month) {
//            let curDate = new Date(year,month,0);
            return new Date(year,month,0).getDate();
          },
          /*图片处理*/
          upload(e){
            if(this.img.length>=3){
              this.toastText = '最多上传3张图！'
              this.showPositionValue = true
              return
            }
            let file = e.target.files
            let n = 3 - this.img.length
            let len
            if(file.length>n){
              this.toastText = '最多上传3张图！'
              this.showPositionValue = true
              len = n
            }else{
              len = file.length
            }
            for(let i=0;i<len;i++){
              let fileReader = new FileReader()
              fileReader.readAsDataURL(file[i])
              let _this = this
              fileReader.onload = function(e) {
                _this.img.push(this.result)
//                console.log(_this.img)
                _this.axios.post('/home/Order/base64imgsave',{
                  token:_this.$store.state.token,
                  img:this.result
                }).then((res)=>{
                  if(res.data.code==1){
//                    _this.imgURL = res.data.url
                    _this.imgURL.push(res.data.url)
                  }
                })
              }
            }
//            console.log(this.img)
//            let that = this
//            setTimeout(function(){
//              that.axios.post('/home/Order/base64imgsave',{
//                token:that.$store.state.token,
//                img:JSON.stringify(that.img)
//              }).then((res)=>{
//                if(res.data.code==1){
//                  that.imgURL = res.data.url
//                }
//              })
//            },1000)
          },
          delIMG(index){
            this.img.splice(index,1)
            this.imgURL.splice(index,1)
          },
          /*选择收货地址*/
          chooseAdress(){
            this.showid = 2
          },
          /*下单*/
          btn(){
            if(!this.adress_id||this.TypechooseList.length<=0||!this.time){
              this.toastText = '内容不完整'
              this.showPositionValue = true
              return
            }
            let year = new Date().getFullYear()
            let currentMon = new Date().getMonth()+1
            if(currentMon>parseFloat(this.time[0])){
              year = year+1
            }
            let date = year+'-'+parseFloat(this.time[0])+'-'+parseFloat(this.time[1])
            let dtype =  this.time[2].substring(0,2)
            let date_type
            if(dtype == '上午'){
              date_type = 0
            }else{
              date_type = 1
            }
            let dataOBJ = {}
            if(this.imgURL.length<=0){
              if(this.remark){
                dataOBJ = {
                  token:this.$store.state.token,
                  address_id:this.adress_id,
                  com_type:this.orderTYPE,
                  class_type:this.TypechooseList,
                  date: date,
                  date_type: date_type,
                  remark:this.remark
                }
              }else{
                dataOBJ = {
                  token:this.$store.state.token,
                  address_id:this.adress_id,
                  com_type:this.orderTYPE,
                  class_type:this.TypechooseList,
                  date: date,
                  date_type: date_type
                }
              }
            }else{
              if(this.remark){
                dataOBJ = {
                  token:this.$store.state.token,
                  address_id:this.adress_id,
                  com_type:this.orderTYPE,
                  class_type:this.TypechooseList,
                  date: date,
                  date_type: date_type,
                  remark:this.remark,
                  url:JSON.stringify(this.imgURL)
                }
              }else{
                dataOBJ = {
                  token:this.$store.state.token,
                  address_id:this.adress_id,
                  com_type:this.orderTYPE,
                  class_type:this.TypechooseList,
                  date: date,
                  date_type: date_type,
                  url:JSON.stringify(this.imgURL)
                }
              }
            }
            if(this.companyName){
              dataOBJ.com_name = this.companyName
            }
            this.axios.post('/home/Order/confirmOrder',dataOBJ).then((res)=>{
              if(res.data.code==200){
                this.$router.push('/recovery/success')
              }
            })
          },
          /****地址处理****/
//          跳转添加地址
          addAdress(){
            this.$router.push('/recovery/addAdress')
          },
//          跳转编辑地址
          edit(id){
            this.$router.push({
              path: '/recovery/addAdress',
              name: 'addAdress',
              params: {
                id: id
              }
            })
          },
//          删除地址
          del(id,delINDEX){
            this.isdel = !this.isdel
            this.delID = id
            this.delINDEX = delINDEX
          },
          delAdress(){
            this.axios.post('/home/Address/delAddress',{
              token:this.$store.state.token,
              a_id:this.delID
            }).then((res)=>{
              if(res.data.code==200){
                this.list.splice(this.delINDEX,1)
                this.isdel = !this.isdel
              }
            })
          },
          cancelDEL(){
            this.isdel = !this.isdel
            this.delID = null
          },
//          设置默认地址
          setMOREN(id){
            this.axios.post('/home/Address/defaultAddress',{
              token:this.$store.state.token,
              a_id:id
            }).then((res)=>{
              if(res.data.code==200){
                this.axios.post('/home/Address/addressList',{token:this.$store.state.token}).then((res)=>{
                  if(res.data.code==200){
                    this.list = res.data.data
                  }
                })
              }
            })
          },
//          选择这个地址
          chooseA(id){
            this.showid = 1
            this.adress_id = id
            let list = this.list
            for(let value in list){
              if(list[value].id == id){
                this.userName = list[value].con_name
                this.userPhone = list[value].con_tel
                this.userAdress = list[value].address_dis
                this.userAdress_detail = list[value].address_detail
                this.noAdress = false
              }
            }
          },
        }
    }
</script>

<style scoped>
  .useraddBOX{
    width:100%;
    height:2.02rem;
    margin-top:.26rem;
    text-align: center;
  }
  .useraddlogo{
    width:.65rem;
    height:.65rem;
    background-image: url("img/jia.png");
    margin:.49rem 0 .21rem;
  }
  .userInfoBOX{
    padding:.15rem .3rem;
    margin-top:.26rem;
  }
  .userInfoBOX span{
    line-height: .5rem;
  }
  .userInfo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .userAdress{
    display: flex;
    align-items: flex-start;
  }
  .userAdress>i{
    /*line-height: .5rem;*/
    margin-top:.1rem;
  }
  .userAdress>span{
    width:6.4rem;
    /*line-height: .5rem;*/
    /*background-size: 100% 100%;*/
  }
  .userlogo{
    width:.27rem;
    height:.27rem;
    background-image: url("img/user.png");
    margin-right: .2rem;
  }
  .addlogo{
    width:.22rem;
    height:.29rem;
    background-image: url("img/add.png");
    background-size: 100% 100%;
    margin-right: .32rem;
  }
  /*如果是企业下单*/
  .companyName{
    font-size: .3rem;
  }
  .isCompanyBOX{
    height:.83rem;
    margin-top:.26rem;
    line-height: .83rem;
    display: flex;
    align-items: center;
    padding:0 .3rem;
  }
  .isCompanyBOX>div>i{
    font-size:.32rem;
    color: #28AC4F;
  }
  .isCompanyBOX>input{
    height: .6rem;
    flex:1;
    text-align: right;
  }
  /*choose*/
  .chooseLIST{
    margin-top: .26rem;
  }
  .choose_li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 .3rem;
    height:.82rem;
    border-bottom: 1px solid #E6E6E6;
  }
  .choose_type{

  }
  .choose_type_title{
    height:.83rem;
    line-height: .83rem;
    padding-left:.3rem;
    border-bottom:1px solid #E6E6E6;
  }
  .typeLIST{
    padding:.3rem .3rem .6rem .3rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #e6e6e6;
  }
  .typeLIST>li{
    margin-right:.5rem;
    /*padding:;*/
  }
  .typelogo{
    width:.27rem;
    height:.27rem;
    background-image: url("img/type.png");
    margin-right:.2rem;
  }
  .typeChooseLogo{
    width:.3rem;
    height:.3rem;
    display: inline-block;
    color: #999;
  }
  .typeChoosedLogo{
    width:.3rem;
    height:.3rem;
    display: inline-block;
    color: #28AC4F;
  }
  .timelogo{
    width:.27rem;
    height:.27rem;
    background-image: url("img/time.png");
    margin-right:.2rem;
  }
  .pickerBOX{
    display: flex;
    align-items: center;
  }
  .picker{
    margin-right:.1rem;
  }
  /*tip*/
  .tip{
    padding:0 .3rem .3rem .3rem;
    margin-top: .26rem;
  }
  .tipBOX{
    display: flex;
    align-items: center;
    height:.84rem;
    border-bottom: 1px solid #E6E6E6;
  }
  .tiplogo{
    width: .27rem;
    height: .27rem;
    background-image: url("img/tip.png");
    margin-right:.3rem;
  }
  /*tips内容*/
  textarea{
    width:100%;
    height:1.21rem;
    padding-top:.29rem;
    line-height: .4rem;
  }
  .imgLIST{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .imgLIST>li{
    width:1.7rem;
    height:1.7rem;
    position: relative;
    margin-right:.25rem;
    margin-top:.2rem;
  }
  .imgLIST>li>img{
    width:100%;
    height:100%;
  }
  .delIMGBTN{
    width:.3rem;
    height:.3rem;
    background-image: url("img/cha.png");
    position: absolute;
    right:-.15rem;
    top:-.15rem;
  }
  .addIMGBOX{
    overflow: hidden;
  }
  .addIMGBOX>input{
    width:100%;
    height:100%;
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 2;
    opacity: 0;
  }

  /*回收要求*/
  .Requirement_box{
    margin-top:.2rem;
    padding-top:.21rem;
    padding-bottom: .4rem;
  }
  .Requirement_title{
    margin-bottom:.15rem;
  }
  .Requirement_title>i{
    margin:0 .2rem 0 .3rem;
    font-size: .32rem;
    color: #28AC4F;
  }
  .Requirement_list{
    padding-left:.89rem;
  }
  .Requirement_list>li{
    line-height: .5rem;
  }
  /*btn*/
  .xiadan_btn{
    width:6.92rem;
    height:.88rem;
    background:#28ac4f; /* 一些不支持背景渐变的浏览器 */
    background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #28ac4f, #3aab5c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #28ac4f, #3aab5c); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, #28ac4f, #3aab5c); /* 标准的语法 */
    text-align: center;
    line-height: .88rem;
    margin: .62rem auto 0;
    border-radius: 5px;
  }

  /*******/
  .iconfont{
    margin-right:.16rem;
  }
  .listBOX>li:not(:first-child){
    border-top: 1px solid #F2F2F2;
  }
  .list{
    padding:.3rem .3rem .2rem .44rem;
  }
  .listBOX{
    margin-top:.26rem;
  }
  .userInfo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .userAdress{
    margin-top:.2rem;
    margin-bottom:.62rem;
  }
  .operation>li:first-child{
    margin-right:.53rem;
  }
  .btn{
    width:6.92rem;
    height:.88rem;
    background:#28ac4f; /* 一些不支持背景渐变的浏览器 */
    background: -webkit-linear-gradient(right, #28ac4f, #3aab5c); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #28ac4f, #3aab5c); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #28ac4f, #3aab5c); /* Firefox 3.6 - 15 */
    background: linear-gradient(right, #28ac4f, #3aab5c); /* 标准的语法 */
    text-align: center;
    line-height: .88rem;
    margin: 1.11rem auto 0;
    border-radius: 5px;
  }

  .choice_box{
    width:5.41rem;
    height:2.51rem;
    border-radius: .3rem;
    /*margin:0 auto;*/
    transform: translate(-50%,-50%);
    position: absolute;
    top:50%;
    left:50%;
  }
  .choice_box>p{
    height:1.52rem;
    line-height: 1.52rem;
    text-align: center;
  }
  .choice_btn{
    height:.98rem;
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
  }
  .choice_btn>li:first-child{
    border-right: 1px solid #ddd;
  }
  .choice_btn>li{
    flex:1;
    height:.98rem;
    font-size:.36rem;
    color: #3794E1;
    text-align: center;
    /*display: inline-block;*/
    /*vertical-align: middle;*/
    line-height: .98rem;
  }
</style>
